<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的信息</title>
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/indexBackgroundContain.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/element-ui/lib/index.js"></script>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
</head>
<style>
    /* 布局样式：分为左侧和右侧 */
    .info-section {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .left-section {
        flex: 3; /* 左侧区域宽度增加 */
        margin-right: 20px;
        background-color: #fff; /* 添加背景色以对比显示 */
        padding: 20px; /* 内边距优化布局 */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .right-section {
        flex: 2;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 表格样式 */
    .el-table {
        width: 100% !important; /* 确保表格宽度占满容器 */
        table-layout: fixed; /* 固定表格布局，确保列均匀分布 */
    }

    .el-table-column {
        text-align: center; /* 列文本居中 */
    }

    .top-row {
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }
</style>
<body>
<div id="app">
    <div class="header">
        <img src="../img/logo1.png" alt="学校logo" class="logo">
        <span class="headerPlaceholder"></span>
        <h2 class="textH2">文体会堂预约信息管理系统界面</h2>
    </div>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'loginIndex' }" @click="selectPage('loginIndex')">主界面</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'noticeManage' }" @click="selectPage('noticeManage')">公告管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'placeManage' }" @click="selectPage('placeManage')">场地管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'placeSubscribe' }" @click="selectPage('placeSubscribe')">预约场地</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'alreadySubscribe' }" @click="selectPage('alreadySubscribe')">已预约信息</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'subscribeHistory' }" @click="selectPage('subscribeHistory')">预约历史</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'usersManage' }" @click="selectPage('usersManage')">用户信息管理</div>
            <div class="sidebar-item" :class="{ 'active-module': currentPage === 'myInfo' }" @click="selectPage('myInfo')">我的信息</div>
        </div>

        <!-- 我的信息展示区域 -->
        <div class="main-content" v-if="currentPage === 'myInfo'">
            <!-- 顶部标题 -->
            <h2 style="text-align: center">我的信息</h2>

            <!-- 中间内容区域 -->
            <div class="info-section">
                <!-- 左侧：我的账号信息 -->
                <div class="left-section">
                    <div class="top-row">我的账号信息</div>
                    <el-table :data="myInfoTable" border>
                        <el-table-column prop="label" label="字段" align="center"></el-table-column>
                        <el-table-column prop="value" label="信息" align="center"></el-table-column>
                    </el-table>
                </div>

                <!-- 右侧：注意事项 -->
                <div class="right-section">
                    <h4>注意事项</h4>
                    <p>1. 请确认您的账号信息是否正确。</p>
                    <p>2. 如果信息有误，请及时联系管理员。</p>
                    <p>3. 请勿将账号密码透露给他人。</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: '',

                myInfo: {
                    userId: "",
                    name: "",
                    password: "",
                    role: "",
                    status: ""
                },

                myInfoTable:[],

                dialogVisibleEdit: false
            };
        },
        methods: {
            selectPage(page) {
                this.currentPage = page;
                localStorage.setItem('currentPage', page);
                const nextUrl = "/pages/" + page + ".html";
                window.location.href = nextUrl;
            },
            getMyInfo() {
                const userId = localStorage.getItem('userId');
                const url = "/myInfo/"+userId;
                axios.get(url).then((resp) => {
                    if (resp.data.code === 20001) {
                        this.myInfo = resp.data.data;

                        this.myInfoTable = [
                            { label: "账号/学号/工号", value: this.myInfo.userId },
                            { label: "用户名", value: this.myInfo.name },
                            { label: "密码", value: this.myInfo.password },
                            { label: "角色", value: this.myInfo.role },
                            { label: "状态", value: this.myInfo.status }
                        ];
                    } else {
                        this.$message.error("获取个人信息失败");
                    }
                }).catch(() => {
                    this.$message.error("网络请求错误");
                });
            }
        },
        mounted() {
            const savedPage = localStorage.getItem('currentPage');
            if (savedPage) {
                this.currentPage = savedPage;
            } else {
                this.currentPage = '';
            }
            this.getMyInfo();
        }
    });
</script>
</body>
</html>
